<?php
session_start();
$title = '爱填表--iTable';
$username='no login';
$nameMsg='no msg';
if(@$_SESSION['userid']){
	$logintag=true;
	$username=@$_SESSION['username'];
	$nameMsg=@$_SESSION['userid'];
}else{
	$logintag=false;
}

?>

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title><?php echo $title;?></title>
	<script src="js/vue.min.js"></script>
	<script src="js/vue-resource.min.js"></script>
	<link href="css/mui.min.css" rel="stylesheet" />
</head>

<body>
	<!--头部导肮-->
	<header class="mui-bar mui-bar-nav">
		<h1 class="mui-title"><?php echo $title;?></h1>
	</header>
	<!--选择栏-->
	<nav id="tabberList" class="mui-bar mui-bar-tab sliderSegmentedControl">
		<a class="mui-tab-item mui-active" href="#indexApp">
			<span class="mui-icon mui-icon-home"></span>
			<span class="mui-tab-label ">首页</span>
		</a>
		<a v-on:click="toMsglist" class="mui-tab-item" href="#tabbar-with-list">
				<span class="mui-icon mui-icon-email"><span v-if="msgValue!=0" class="mui-badge">{{msgValue}}</span></span>
			<span class="mui-tab-label">数据</span>
		</a>
		<a class="mui-tab-item" href="#tabbar-with-login">
			<span class="mui-icon mui-icon-gear"></span>
			<span class="mui-tab-label">设置</span>
		</a>
	</nav>
	<!--信息主体-->
	
	<div class="mui-content">
		<!--首页部分的内容
			begin
		-->
		
		<div id="indexApp" class="mui-control-content mui-active" style="margin: 5px;">
			
			<div class="mui-input-row mui-search">
					<input v-model="inputSearch"  @keyup.enter="searchEnterFun" type="search" class="mui-input-clear mui-bar-nav" placeholder="查找">
					
			</div>
			<ul  class="mui-table-view mui-table-view-chevron" >
				<li class="mui-table-view-cell">
					<h5 class="mui-content-padded">选择你的表格处理方式</h5>
					
				<form class="mui-input-group">
					<div class="mui-input-row mui-radio mui-left">
						<label>修改模式</label>
						<input @click="getType(typeValue[0])"  name="radio1" type="radio" checked>
					</div>
					<div class="mui-input-row mui-radio mui-left">
						<label>采集模式</label>
						<input  @click="getType(typeValue[1])" name="radio1" type="radio" >
					</div>
				</form>
					<!--<input ref="files" type="file" name="avatar" v-on:change="getFile" >-->
					
					<input type="file" name='file' @change="getFile">
					<button @click="uploadFile()">上传</button><!--<a class="mui-navigate-right" href="table.php">aa</a>-->
				</li>
			</ul>
			<div class="mui-input-row mui-search">
			<ul  class="mui-table-view mui-table-view-chevron" >
				
				<p>说明：只要将xls 文件 按照 一定格式排版  即可共享修改</p>
				<p>目前开发阶段 暂时仅支持 修改模式，修改模式 指的是 表格仅供修改 不能添加</p>
				<p> 搜索框 搜 共享的 code 就可以 跳转到 存在的 表格里</p>
				<p>如果是 自己的表格 可以在 数据里面 处理 查看 和下载</p>
				<p>规则 很简单 只有 发布者需要 登陆，修改者 只能 修改 所以 code 别落入坏人手里</p>
				<p>具体说明 看<a href="help.html">详细信息</a></p>
				<p>也可以下载<a href="test_iTable.xls">模板</a>试一试，记得注册才能用哦</p>
			</ul>
			</div>
		</div>
		<!--首页 
			end
		-->
	
		<!--信息页面内容-->
		
		<div id="tabbar-with-list" class="mui-control-content">
			<div class="title">数据列表</div>
			<ul class="mui-table-view mui-media">
				<template v-if="seen" class="mui-scroll-wrapper">	
				<li v-for=" (value,key) in datalist.tableJson" class="mui-table-view-cell mui-collapse">
					<a class="mui-navigate-right" href="#">
						<div class="mui-table-cell mui-col-xs-10">
		                    <h4 class="mui-ellipsis">{{key+1}}:{{value.title!=null?value.title:'无标题'}}</h4>
		                   
		                    <p class="mui-h6 mui-ellipsis">表单类型{{value.type}}:状态{{value.tag}}</p>
		                </div>
		                <div class="mui-table-cell mui-col-xs-2 mui-text-right">
		                    <span class="mui-h5">{{value.datatime}}</span>
		                </div><h5>表单code:{{value.code}}</h5>
					</a>
					<div class="mui-collapse-content">
						 
						<button @click="readTo(value.code)">查看</button>
						<button @click="downLoadFile(value.code)">下载</button>
						<button @click="copyUrl(value.code)">复制分享地址</button>
						<button @click="copyCode(value.code)">复制code</button>
					</div>
				</li>
				</template>
			</ul>
		</div>
		<!--信息页 
			end
		-->
		<!--设置 页面-->
		<div id="tabbar-with-login" class="mui-control-content">
			<ul class="mui-table-view ">
				<li v-if="loginTag==true" class="mui-table-view-cell mui-media ">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="img/headtest.jpg">
						<div  class="mui-media-body">
							{{username}}
							<p class='mui-ellipsis'>{{nameMsg}}</p>
						</div>
					</a>
				</li>
			</ul>
			<ul class="mui-table-view" style="margin-top: 25px;">
			</ul>
			<ul class="mui-table-view" style="margin-top: 25px;">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						关于Iable
					</a>
				</li>
			</ul>
			<ul v-if="loginTag" class="mui-table-view" style="margin-top: 25px;">
				<li class="mui-table-view-cell">
					<a @click="logout()" style="text-align: center;color: #FF3B30;">
						退出登录
					</a>
				</li>
			</ul>
			<ul v-else="loginTag" class="mui-table-view" style="margin-top: 25px;">
				<li class="mui-table-view-cell">
					<p><a @click="login()" style="text-align: center;color: #FF3B30;">
						登录
			</a>--
					<a @click="register()" style="text-align: center;color: #FF3B30;">
						注册
					</a></p>
				</li>
			</ul>
			
		</div>
		<!--设置
			end
		-->
	</div>
	<script src="js/mui.min.js"></script>
	<script type="text/javascript" src="js/vue-clipboard.min.js" ></script>
<script>
	var muiApp=mui.init({
			swipeBack: false //启用右滑关闭功能
		});
	
	var loginApp=new Vue({
		el:'#tabbar-with-login',
		data:{
			logintag:'<?php echo $logintag;?>',
			username:'<?php echo $username;?>',
			nameMsg: '<?php echo $nameMsg;?>',
			loginTag:'<?php echo $logintag?>'
		},
		methods:{
			login:function(){
				window.location.href="login.php";
			},
			logout:function(){
				var that=this;
				this.$http.get('API.php?type=logout').then(function(res){
					if(res.body.status=='success'&&res.body.type=='logout'){
						mui.alert('退出登陆成功', '提示', function() {
							that.loginTag=false;
							that.usrename='nologin';
							that.nameMsg='no msg';
						});
					}
				});
				
			},
			register:function(){
				window.location.href="register.php";
			}
		}
	});

	var listApp=new Vue({
		el:"#tabbar-with-list",
		data:{
			seen:false,
			datalist:{
			}
		},
		methods:{
			copyCode:function(code){
				this.$copyText(code).then(function (e) {
			          alert('Copied')
			          console.log(e)
			        }, function (e) {
			          alert('Can not copy')
			          console.log(e)
			        })
			},
			copyUrl:function(code){
				var urldata=window.location.href+"?code="+code;
			  this.$copyText(urldata).then(function (e) {
			          mui.toast('Copied')
			          console.log(e)
			        }, function (e) {
			          alert('Can not copy')
			          console.log(e)
			        })
				
			},
			getDatalist:function(e){
				var that=this;
				this.$http.get('API.php?type=gettablelist')
				.then(function(res){
					that.datalist=res.body;
					if(res.body.status == 'success'){
						that.seen=true;
						tabbarlistApp.msgValue=this.datalist.tableJson.length;
					}else{
						this.datalist.tableJson={length:0};
						that.seen=false;
					}
				})
				
			},
			downLoadFile:function(code){
				 window.location.href="API.php?type=download&code="+code<?php echo "+\"&apikey=".@$_SESSION['apikey']."\"";?>;
			},
			readTo:function(code){
				 window.location.href="table.php?code="+code;
			}
		}
	});
	
	

	
	var indexApp=new Vue({
		el:'#indexApp',
		data:{
			filename:'',
			inputSearch:'',
			uploadRes:'',
			fileType:'add',
			typeValue:['add','NOT']
		},
		methods:{
			searchEnterFun:function(e){
				var that=this;
                 var keyCode = window.event? e.keyCode:e.which;
                 if(keyCode == 13 && this.inputSearch!=''){
					this.$http.get('API.php?type=gettable',{
						params:{
							code:that.inputSearch,
							do:'search'
						}
						
					}).then(function(res){
						if(res.body.status=='success'){
							var btnArray = ['否', '是'];
							mui.confirm('内容存在正在跳转', '提示窗', btnArray, function(e) {
								if (e.index == 1) {
									 window.location.href="table.php?code="+that.inputSearch;
								} else {
									return ;
								}
							})
						}else{
							mui.toast('code 不存在!');
						}
					})
                 }else{
                 	console.log(e)
                 }
           },
           uploadFile:function(){
				var that=this;
				var da=new FormData();
				
				da.append('file',this.filename);
				this.$http({
					method:'post',
					url:'API.php?type=upload',
					headers: { 
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' 
					}, 
					
					body:da
				}).then(function(res){
					that.uploadRes=res.body;
					if(res.body.status=='success'){
						mui.toast('上传成功！');
						var btnArray = ['取消', '确定'];
						mui.prompt('请输入他的标题：', '标题同于区分或者说明', '信息框', btnArray, function(e) {
							if (e.index == 1) {
								mui.toast('设置成功，正在处理文件！');
								that.$http.get('API.php?type=procfile',{
								params:{
									filename:that.uploadRes.filename,
									do:that.fileType,
									title:e.value
								}
								}).then(function(res){
									if(res.body.status=='success'){
										mui.toast('完成处理！');
									}
								});
							} else {
								mui.toast('未设置标题，正在处理文件！');
								that.$http.get('API.php?type=procfile',{
								params:{
									filename:that.uploadRes.filename,
									type:that.fileType
								}
								}).then(function(res){
									if(res.body.status=='success'){
										mui.toast('完成处理！');
									}
								});
							}
							
						});
						
					}
				});
           },
           getFile:function($event){  
			      this.filename = $event.target.files[0]; //获取要上传的文件
			      
			},
			getType:function(type){
				this.fileType=type;
			}
		}
	});
	
	//监听 搜索框
	indexApp.$watch('inputSearch',function(nVal,oVal){
		this.inputSearch=nVal;
	});
	<?php
		//如果 有api 接入 则直接搜索
	if(@$_GET['code']){
		echo " window.location.href=\"table.php?code=".$_GET['code']."\";";
//		echo "indexApp.inputSearch=\"".@$_GET['code']."\";indexApp.searchEnterFun();";
	}
	?>
	
	var tabbarlistApp=new Vue({
		el:"#tabberList",
		data:{
			msgValue:0
		},
		
		methods:{
			toMsglist:function(){
				listApp.getDatalist();
				this.msgValue=listApp.datalist.tableJson.length;
			}
		},
		beforeCreate:function(){
			listApp.getDatalist();
			
		}
	});
//	listApp.getDatalist();
</script>


</body>

</html>

